<template>
  <div>
    <h2>基本信息</h2>
    <el-form label-width="100px">
      <el-form-item label="图书名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="图书作者">
        <el-input v-model="form.author"></el-input>
      </el-form-item>
      <el-form-item label="出版社">
        <el-input v-model="form.press"></el-input>
      </el-form-item>
      <el-form-item label="出版时间">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
      <el-form-item label="活动形式">
        <el-input type="textarea" v-model="form.huodong"></el-input>
      </el-form-item>

      <el-form-item label="头像">
        <el-avatar :size="60" src=""></el-avatar>
        <el-upload :before-upload="beforeUpload" action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="uploadChange" name="file" :on-success="uploaded" :show-file-list="false">
          <el-button>+ 选择文件</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <h2>上架信息</h2>
    <el-form label-width="100px">
      <el-form-item label="图书分类">
        <el-cascader v-model="value" :props="{
            children: 'child',
            label: 'title',
            value: 'id'
          }" :options="options" clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="售卖设置" prop="resource">
        <el-radio-group v-model="form.Sale">
          <el-radio label="付费"></el-radio>
          <el-radio label="免费"></el-radio><br>
          <el-form v-if="this.form.Sale=='付费'">
            <el-form-item label="图书价格">
              <el-input v-model="form.bookprice"></el-input>
            </el-form-item>
            <el-form-item label="划线价格">
              <el-input v-model="form.huaxian"></el-input>
            </el-form-item>
          </el-form>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="图书库存">
        <el-input v-model="form.stock"></el-input>
      </el-form-item>
      <el-form-item label="销售基数">
        <el-input v-model="form.xiaoshou"></el-input>
      </el-form-item>
      <el-form-item label="浏览基数">
        <el-input v-model="form.liulan"></el-input>
      </el-form-item>
    </el-form>
    <div style="margin-left:40%">
      <el-button @click="$router.go(-1)">返回</el-button>
      <el-button type="primary" @click="addback">保存并返回</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { getClass, addBooks } from "../../api/api6";
export default {
  data() {
    return {
      value: "",
      form: {
        name: "",
        date1: "",
        avatar: [],
        desc: "",
        resource: "",
        author: "",
        press: "",
        huodong: "",
        Sale: "付费",
        bookprice: "",
        huaxian: "",
        stock: "",
        xiaoshou: "",
        liulan: "",
      },
      options: [],
    };
  },
  mounted() {
    getClass(this.query).then((res) => {
      this.options = res.data;
    });
  },
  methods: {
    beforeUpload() {},
    uploadChange() {},
    uploaded() {},

    addback() {
      addBooks(this.form).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style lang='scss'>
.el-input__inner {
  width: 300px !important;
}
.el-textarea__inner {
  width: 500px !important;
}
</style>
